<template>
  <div class="header">
    <div class="header-item header-home">
      <div class="home-form">
        <span class="iconfont icon-home"></span>
        <a href="#"> 路人甲Blog </a>
      </div>
    </div>
    <div class="header-item header-search">
      <div class="search-form">
        <input type="text" placeholder="请输入搜索内容" />
        <div class="search-btn">
          <span class="iconfont icon-sousuo"></span>
        </div>
      </div>
    </div>
    <div class="header-item header-login">
      <div class="login-form">
        <img src="../assets/img/notlogin.jpg" alt="" />
        <router-link :to="{name: 'login'}">登录</router-link>
        <router-link :to="{name: 'register'}">注册</router-link>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.header {
  height: 16vh;
  display: flex;
  justify-content: space-between;
  // border: 1px solid #fff;
  .header-item {
    height: 70px;
    display: flex;
    align-items: center;
  }
  .header-home {
    padding-left: 20px;
    .home-form {
      span {
        font-weight: normal;
        color: rgb(255, 92, 124);
        font-size: 26px;
        vertical-align: bottom;
      }
      a {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        font-size: 24px;
      }
    }
  }
  .header-search {
    .search-form {
      display: flex;
      align-items: center;
      height: 40px;
      background-color: #fff;
      border-radius: 2px;
      input {
        width: 20vw;
        height: 100%;
        box-sizing: border-box;
        padding: 4px;
        border: none;
        outline: none;
        border-radius: 2px;
      }
      .search-btn {
        width: 30px;
        height: 100%;
        position: relative;
        background-color: rgb(231, 231, 231);
        cursor: pointer;
        border-radius: 0 2px 2px 0;
        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .search-btn:hover {
        background-color: rgb(185, 185, 185);
      }
    }
  }
  .header-login {
    padding-right: 20px;
    .login-form {
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        vertical-align: middle;
      }
      a {
        vertical-align: top;
        text-decoration: none;
        color: #fff;
        font-size: 20px;
        padding-left: 5px;
      }
    }
  }
}
</style>